<!-- 基本信息 -->

<template>
  <div>
    <MajorTitle title="基本信息">
      <CommonTag v-for="item in tagList" :key="item.id" :obj="item" />
    </MajorTitle>

    <EasyRow>
      <div class="sixth alignCenter">
        <div v-if="readyOne">
          <ShowPhoto bind="picUrl" noLabel row4 />
          <!-- <BtnText @click="showQrCode">设备二维码</BtnText>
          <el-image v-show="false" ref="qrCode" :src="one.qrCodeUrl" :preview-src-list="[one.qrCodeUrl]" /> -->
        </div>
      </div>

      <div class="sixth5">
        <EasyRow col3>
          <ShowText :label="`${CORE.MAP.ASSET}编号`" bind="assetCode" />
          <ShowText :label="`${CORE.MAP.ASSET}名称`" bind="assetName" />
          <ShowStatus :label="`${CORE.MAP.ASSET}状态`" />
        </EasyRow>

        <EasyRow col3>
          <ShowDate label="品牌" bind="brandName" />
          <ShowText label="型号" bind="modelName" />
          <ShowText label="序列号" bind="serialNo" />
        </EasyRow>

        <EasyRow col3>
          <ShowText
            v-for="item in one.assetPropertyDto"
            :key="item.propertyId"
            :one="item"
            :label="item.propertyLabel"
            bind="propertyValue"
            :words="getWords(item.propertyLabel)"
          />
        </EasyRow>

        <EasyRow col3>
          <ShowText :label="`${CORE.MAP.ASSET}分类`" bind="assetTypeName" />
          <ShowTree :label="`所属${CORE.MAP.ORGAN}`" bind="organizationId" :dict="CORE.ORGAN.DICT" />
          <ShowTree :label="`所在${CORE.MAP.REGION}`" bind="areaId" :dict="CORE.REGION.DICT" allName />
        </EasyRow>

        <EasyRow col3>
          <ShowText label="供应商" bind="supplierName" />
          <ShowText :label="`所属${CORE.MAP.CONTRACT}`" bind="projectName" />
          <ShowText label="单价 (元)" bind="price" />
        </EasyRow>

        <EasyRow col3>
          <ShowDate label="购置日期" bind="purchaseDate" />
          <ShowDate label="启用日期" bind="useTime" />
          <ShowText :label="`${CORE.MAP.ASSET}年限`" bind="fixedNumberOfYear" />
        </EasyRow>

        <EasyRow col3>
          <ShowDict label="开启折旧" bind="depreciationEnable" :dict="CORE.DICT.YES" />
          <ShowDict label="折旧方法" bind="depreciationType" :dict="DICT.OLD_TYPE" />
          <ShowNum label="净残率" bind="depreciationRemain">
            <template #default="{ text }">{{ text ? `${text}%` : '-' }}</template>
          </ShowNum>
        </EasyRow>

        <EasyRow>
          <ShowText label="备注信息" bind="description" multiRow />
        </EasyRow>
      </div>
    </EasyRow>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeviceBase',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 标签列表
     */
    tagList() {
      const { $root: { iot_tag_selectDict: tagDict }, one: { assetLabelDtos } } = this
      return assetLabelDtos.map(({ labelId }) => {
        const [id, name = '-', color, bgColor] = tagDict.find(([id]) => labelId === id) || []
        return { id, name, color, bgColor }
      })
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 显示二维码图片
     */
    showQrCode() {
      this.$refs.qrCode.showViewer = true
    },

    /**
     * 获取汉字数
     */
    getWords(label) {
      const text = label.replace(/[\u4e00-\u9fa5]/g, '**')
      if (text.length < 8) return 4
      return (text.length / 2) | 0
    },
  },
}
</script>
